<script lang="ts" setup>
import { ref } from "vue";

const storeModalVisible = ref(false);
const storePickerVisible = ref(false);
</script>

<template>
  <umi-container min-height="100vh" bg-color="#f2f2f2" padding="32px 300px">
    <umi-card title="门店信息">
      <umi-descriptions :column="1" :label-style="{ width: '100px', padding: '24px 8px' }" bordered>
        <umi-descriptions-item label="门店ID">380651</umi-descriptions-item>
        <umi-descriptions-item label="手机号">17727624776</umi-descriptions-item>
        <umi-descriptions-item label="修改密码">
          <div>******</div>
          <template #extra>
            <umi-button type="primary" @click="storeModalVisible = true">修改</umi-button>
          </template>
        </umi-descriptions-item>
        <umi-descriptions-item label="行业分类">教培/书画</umi-descriptions-item>
        <umi-descriptions-item label="门店名称">广东小蓝科创有限公司</umi-descriptions-item>
        <umi-descriptions-item label="门店地址">
          <div>广东省广州市越秀区环市中路316号</div>
          <template #extra>
            <umi-button type="primary" @click="storePickerVisible = true">修改</umi-button>
          </template>
        </umi-descriptions-item>
        <umi-descriptions-item label="楼层门牌">
          <div>21楼2104室</div>
          <template #extra>
            <umi-button type="primary" @click="storeModalVisible = true">修改</umi-button>
          </template>
        </umi-descriptions-item>
        <umi-descriptions-item label="联系电话">
          <div>17727624776</div>
          <template #extra>
            <umi-button type="primary" @click="storeModalVisible = true">修改</umi-button>
          </template>
        </umi-descriptions-item>
      </umi-descriptions>
    </umi-card>
    <umi-modal v-model:visible="storePickerVisible" :width="800" title="门店地址">
      <umi-form>
        <umi-form-item label="所在地区" required>
          <umi-input placeholder="广东省 / 广州市 / 天河区"></umi-input>
        </umi-form-item>
        <umi-form-item label="详细地址" required>
          <umi-input value="高科大厦B座21楼2104室"></umi-input>
        </umi-form-item>
        <umi-form-item label="门店定位" required>
          <umi-space direction="vertical" :size="16">
            <umi-button type="primary">搜索地图</umi-button>
            <umi-image src="http://static.usemath.cn/529aebb7-0d7a-4e32-b8cf-ac984b8120b3.png"></umi-image>
          </umi-space>
        </umi-form-item>
      </umi-form>
    </umi-modal>
    <umi-modal v-model:visible="storeModalVisible" :width="500" title="门店信息">
      <umi-form>
        <umi-form-item label="修改密码" required>
          <umi-input></umi-input>
        </umi-form-item>
        <umi-form-item label="楼层门牌" required>
          <umi-input value="21楼2104室"></umi-input>
        </umi-form-item>
        <umi-form-item label="联系电话" required>
          <umi-input value="13512345678"></umi-input>
        </umi-form-item>
      </umi-form>
    </umi-modal>
  </umi-container>
</template>
